<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- 先引入react,再引入react-dom,因为react是核心库，react-dom是扩展库 -->
<!-- 引入以后全局多了一个REACT和ReactDOM对象 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 用于将jsx转为js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="example"></div>
<!-- 此处一定要写babel，不写就是默认js -->
<script type="text/babel">
const data =['react', 'angular', 'vue']
// 1.创建虚拟DOM,此处一定不要加引号，因为不是字符串
// react可以直接帮我们遍历数组，但是不可以帮我们遍历对象
/* 
  表达式，语句，代码的区别
  js语句也叫js代码，与js表达式不是一个概念
  1.表达式：1个表达式会产生一个值，可以放到任何一个需要值的地方
    例如：a（变量），a+b，demo(1) 【函数调用表达式】    能接到值就是表达式(有返回值就是表达式)，接不到就不是表达式， arr.map() 【】，function test(){}
  代码示例
    let arr = [1,3,5,7,9]
    let result = arr.map((num) => {
      return num + 1
    })
  2.语句（代码）：
    下面都是语句：
      1.if
      2.for
      3.switch
*/
const VDOM = (
  <div>
    <h1>前端学习框架 </h1>
    <ul>
      {data}
    </ul>
    <ul>
      {data}
    </ul>
  </div>
)

ReactDOM.render(
	VDOM,
	document.getElementById('example')
);
</script>

</body>
</html>